import React, { useState, useEffect, useRef } from 'react';
import {
  Card,
  Grid,
  Typography,
  Pagination,
  Button,
} from '@arco-design/web-react';
import styles from './style/index.module.less';
import useLocale from '@/utils/useLocale';
import locale from './locale';
import MButton from '@/pages/system/course/button';
import Lesson from '@/pages/system/course/lesson';
import {
  getCollegesAndMajorApi,
  getLessonsApi,
  getSysCourseApi,
} from '@/request/api';
import LessonFormModal from './lessonFormModal';

const Row = Grid.Row;
const Col = Grid.Col;
const { Title } = Typography;

function Course() {
  const t = useLocale(locale);
  const pageSize = 10;
  const [current, setCurrent] = useState(1);

  const [courses, setCourses] = useState({
    total: 0,
    list: [],
  });

  const [colleges, setColleges] = useState([]);
  const [majors, setMajors] = useState([]);
  const [lessons, setLessons] = useState([]);

  const childRef = useRef(null);
  const updateChildState = () => {
    childRef.current.changeVal(true);
  };

  useEffect(() => {
    fetchCourses();
  }, [JSON.stringify(colleges), current]);

  useEffect(() => {
    fetchCollegesAndMajors();
  }, []);

  const fetchCourses = () => {
    const info = {
      pageNum: current,
      pageSize,
    };
    getSysCourseApi(info)
      .then((res) => {
        console.log(res, 'fetchCourses');
        setCourses(res.data);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  const fetchLessons = () => {
    getLessonsApi({})
      .then((res) => {
        const { data } = res;
        const newData = data.map((item) => {
          return { ...item, selected: false };
        });
        setLessons(newData);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  const fetchCollegesAndMajors = () => {
    getCollegesAndMajorApi({})
      .then((res) => {
        const { data } = res;
        const newColleges = [];
        const newMajors = [];
        data.map((item) => {
          if (item.type === 0 && item.disabled === 0) {
            newColleges.push({ ...item, selected: false });
          }
          if (item.type === 1 && item.disabled === 0) {
            newMajors.push({ ...item, selected: false });
          }
        });
        setColleges(newColleges);
        setMajors(newMajors);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  const clickCollege = (college) => {
    college.selected = !college.selected;
    const list = [...colleges];
    setColleges(list);
  };

  const clickMajor = (major) => {
    major.selected = !major.selected;
    const list = [...majors];
    setMajors(list);
  };

  const clickLessons = (lesson) => {
    lesson.selected = !lesson.selected;
    const list = [...lessons];
    setLessons(list);
  };

  const clickPagination = (current) => {
    setCurrent(current);
  };

  return (
    <Row style={{ marginBottom: 16 }} justify={'space-around'}>
      <Col span={17}>
        <Card className={styles.container}>
          <Row justify={'end'}>
            <Button size="large" type="primary" onClick={updateChildState}>
              新建课程
            </Button>
          </Row>
          {courses.list.map((item) => {
            return <Lesson key={item.id} item={item} />;
          })}
          <div className={styles['pagination']}>
            <Pagination
              total={courses.total}
              current={current}
              pageSize={pageSize}
              onChange={(current) => clickPagination(current)}
            />
          </div>
        </Card>
      </Col>
      <Col span={6}>
        <Card className={styles['right-container']}>
          <Title heading={4}>{t['menu.course.search.title']}</Title>
          <Title heading={6} className={styles.title}>
            {t['menu.course.search.college']}
          </Title>
          <MButton colleges={colleges} clickCollege={clickCollege} />
          <Title heading={6} className={styles.title}>
            {t['menu.course.search.relatedMajor']}
          </Title>
          <MButton colleges={majors} clickCollege={clickMajor} />
          <Title heading={6} className={styles.title}>
            {t['menu.course.search.teachersLesson']}
          </Title>
          <MButton colleges={lessons} clickCollege={clickLessons} />
        </Card>
      </Col>
      <LessonFormModal ref={childRef} cancelBackToRefresh={fetchCourses} />
    </Row>
  );
}

export default Course;
